<template>
<div>
    <mt-header title="玩家充值明细">
            <router-link to="/record" slot="left">
                <i class="mintui mintui-back lic-d"></i>
            </router-link>
        </mt-header>



      <div class="list" v-for="(item,i) in down" :key="i">
            <div class="left">
                <p class="ck">总代理：<span> {{item.agentID}}</span></p>
                <p>区域代理：<span>{{item.agentName}}</span></p>
            </div>
            <div class="right">
                <p class="ck">获得房卡：<span>{{item.gems}}</span></p>
                <p>充值时间：<span>{{item.data | moment}}</span></p>
            </div>

        </div>

        <div class="one">
                  <div @touchend='pagingreduce' class="shang">上一页</div>
                  <div @touchend='pagingplus' class="xia">下一页</div>
             </div>  

</div>
</template>


<script>
import {downRe} from '../../api/api'
import { Toast } from 'mint-ui';
export default {
    data(){
        return{ 
             idx:this.$route.params.ids,
             pang:'1',
             down:[],
             length:''
        }
    },
    created(){
        this.getdown()
    },
    methods:{
       getdown(){
           let downData = {
               userId: this.idx,
               pageNo: this.pang,
               pageSize:5
           }
           downRe(downData).then(res =>{
               if(res.data.code == 0){
                   this.down = res.data.data;
                   this.length = res.data.totalPage;
               }
           })
       },
        pagingplus(){
             if(this.pang < this.length){
                   this.pang ++;
                 this.getdown()
             }else {
                 Toast('已经是最后一页了');
             }  
         },
         pagingreduce(){
             if(this.pang > 1){
              this.pang --;
              this.getdown()
             } else {
                 Toast('已经是第一页了');
             }  
         }
    }
}
</script>


<style lang="less" scoped>

    a {
        text-decoration: none;
    }
    .lic-d {
        font-size: 50px;
    }
    .mint-header {
        background: -webkit-linear-gradient(left, #6180F4, #79CBFA);
        font-size: 36px;
        height: 80px;
    }
    .list {
        height: 108px;
        border: 2px solid #cccccc;
        margin: 10px 10px 0;
        color: #949494;
        border-radius: 10px;
        background-color: #fff;
        position: relative;
        p {
            margin: 0;
            padding: 0;
            font-size: 28px;
        }
        .left {
            float: left;
            padding-left: 20px;
            margin-top: 10px;
            font-size: 24px;
            .ck {
                text-align: left;
                ;
            }
            p {
                margin-bottom: 10px;
            }
        }
        .right {
            float: right;
            padding-right: 20px;
            margin-top: 10px;
            p {
                margin-bottom: 10px;
            }
        }
        .dingwe {
            width: 80px;
            height: 80px;
            position: absolute;
            right: 4px;
            top: 10px;
        }
    }
    .one {
        height: 60px;
        margin: 10px 10px 0; 
        text-align: center;
        line-height: 60px;
        font-size: 26px;
        margin-top: 10px;
        margin-bottom: 0;
    }
    .shang {
        width: 320px;
        float: left;
        border: 2px solid #cccccc;
        border-radius: 25px;
        background-color: #dee0e0;
        font-size: 28px;
    }
    .shang:hover {
        background-color: #050505;
        color: #ffffff;
    }
    .xia {
        width: 320px;
        float: right;
        border-radius: 25px;
        border: 2px solid #cccccc;
        background-color: #dee0e0;
        font-size: 28px;
    }
    .xia:hover {
        background-color: #050505;
        color: #ffffff;
    }
    input::-webkit-input-placeholder {
        font-size: 28px;
        color: #ccc;
    }

</style>

